import React, { useState, useEffect, useRef } from 'react';
import { Form, Input, Select, Button, Modal } from 'antd';
import { clone as cloneDeep } from 'ramda';
import { ElementType } from '../../config';
import { message } from 'antd';
import CodeEditor from '@/components/codemirror/CodeEditor';

const { TextArea } = Input;

const CodeForm = ({ data, onUpdate, onCancel }) => {
  const [form] = Form.useForm();
  const [nodeData, setNodeData] = useState(getDefaultData());
  const [codeDialogVisible, setCodeDialogVisible] = useState(false);

  function getDefaultData() {
    return {
      key: '',
      name: '',
      desc: '',
      outgoings: [],
      incomings: [],
      elementType: ElementType.CODE,
      language: 'javascript',
      content: '',
    };
  }

  useEffect(() => {
    if (data) {
      setNodeData(Object.assign(getDefaultData(), cloneDeep(data)));
    }
  }, [data]);

  const validate = () => {
    if (!nodeData.name) {
      message.error('节点名称不能为空');
      return false;
    }
    return true;
  };

  const onSubmit = () => {
    if (!validate()) {
      return;
    }
    onUpdate(cloneDeep(nodeData));
  };

  return (
    <div className="node-method-form">
      <Form form={form} layout="vertical">
        <Form.Item label="节点编码">
          <span>{nodeData.key}</span>
        </Form.Item>
        <Form.Item label="节点名称">
          <Input
            value={nodeData.name}
            onChange={(e) => setNodeData({ ...nodeData, name: e.target.value })}
            placeholder="请输入"
          />
        </Form.Item>
        <Form.Item label="节点描述">
          <TextArea
            value={nodeData.desc}
            onChange={(e) => setNodeData({ ...nodeData, desc: e.target.value })}
            placeholder="请输入"
            rows={2}
          />
        </Form.Item>
        <Form.Item label="脚本语言">
          <Select
            value={nodeData.language}
            onChange={(value) => setNodeData({ ...nodeData, language: value })}
            placeholder="请选择脚本语言"
            style={{ width: '100%' }}
          >
            <Select.Option key="groovy" value="groovy">
              Groovy
            </Select.Option>
            <Select.Option key="javascript" value="javascript">
              JavaScript
            </Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="脚本代码">
          <div className="code-btn">
            <Button onClick={() => setCodeDialogVisible(true)}>编辑代码</Button>
          </div>
          <CodeEditor
            value={nodeData.content}
            onChange={(value) => setNodeData({ ...nodeData, content: value })}
            width="480px"
            height="200px"
            lang={nodeData.language}
          />
        </Form.Item>
        <Form.Item>
          <Button type="primary" onClick={onSubmit}>
            确定
          </Button>
          <Button onClick={onCancel}>取消</Button>
        </Form.Item>
      </Form>
      <Modal
        title="脚本代码"
        open={codeDialogVisible}
        onCancel={() => setCodeDialogVisible(false)}
        width={1000}
        footer={null}
      >
        <CodeEditor
          value={nodeData.content}
          onChange={(value) => setNodeData({ ...nodeData, content: value })}
          width="960px"
          height="500px"
          lang={nodeData.language}
        />
      </Modal>
    </div>
  );
};

export default CodeForm; 